
import { anim, play, combine } from '@feidao/animation';
import { ICombineAnimation } from '@feidao/animation/types';
import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';
import init from '@feidao/web/framework/browser/d/component';
import { id, spaceid, systemid, refsystemid } from './config';
import set_node_attr from '@feidao/web/atom/browser/ui/set-node-attr';

let anim1: ICombineAnimation;
let anim2: ICombineAnimation;
import a001 from './a001';

const actions = {
	init(fd: IFeidaoAiBrowserComponent) {
		const left = document.getElementById('left');
		const left_open = document.getElementById('left_open');
		const left_close = document.getElementById('left_close');
		const right = document.getElementById("right");
		const right2 = document.getElementById("right2");
		const winwid = document.body.clientWidth;
		const narrow = 70;
		const wide = 165;
		let a5;
		let a6;
		if (right2) {
			a5 = anim(right2, {
			}, {
					'width': {
						start: winwid - wide,
						end: winwid - narrow
					}
				});
			a6 = anim(right2, {
			}, {
					'width': {
						start: winwid - narrow,
						end: winwid - wide
					}
				});
		} else {
			a5 = anim(left, {
			}, {
					'width': {
						start: wide,
						end: narrow
					}
				});
			a6 = anim(left, {
			}, {
					'width': {
						start: narrow,
						end: wide
					}
				});
		}
		const a1 = anim(left, {
		}, {
				width: {
					start: wide,
					end: narrow
				}
			});
		const a2 = anim(right, {
		}, {
				'margin-left': {
					start: wide,
					end: narrow
				}
			});

		anim1 = combine([a1, a2, a5], {
			play() {
				left_open.style.display = 'none';
				left_close.style.display = 'block';
				const a = document.getElementsByClassName('tiaozhuan');
				for (var i = 0; i < a.length; i++) {
					a[i]['href'] = a[i]['href'] + '?left="close"';
				}
				set_node_attr(left_close, 'display', '2');
			}
		});


		const a3 = anim(left, {
		}, {
				width: {
					start: narrow,
					end: wide
				}
			}, {
				end() {
					left_open.style.display = 'block';
					left_close.style.display = 'none';
				}
			});

		const a4 = anim(right, {
		}, {
				'margin-left': {
					start: narrow,
					end: wide
				}
			});
		anim2 = combine([a3, a4, a6], {
			end() {
				left_open.style.display = 'block';
				left_close.style.display = 'none';
				const a = document.getElementsByClassName('tiaozhuan');
				for (var i = 0; i < a.length; i++) {
					const str = a[i]['href'];
					a[i]['href'] = str.replace('?left=%22close%22', "");
				}
				set_node_attr(left_close, 'display', '1');
			}
		});
		a001(fd);
	},
	close_animation() {
		play(anim1);
	},
	open_animation() {
		play(anim2);
	}
	, a001
};

const s = {
	"fd-events-init": 'init',
	'open_animation': 'open_animation',
	'close_animation': 'close_animation'
};

export default function main(url: string, query: any) {
	return init(id, s, actions, url, query, { spaceid, systemid, refsystemid });
}
